<template>
  <view>
    <!-- 头部搜索框 -->
    <view class="search-box">
      <my-search @myclick="gotoSearch"></my-search>
    </view>
     
    <!-- 轮播图区域 -->
    <view >
    			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
    				:duration="duration" >
    				<swiper-item v-for="(item ,id) in swiperList" :key="id">
              <!-- 方法一 -->
    					<!-- <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+ item.goods_id">
    					          <image :src="item.image_src"></image>
    					        </navigator> -->
              <!-- 方法二  直接调用函数，相对麻烦-->        
               <view class="swiper-item">
                  <!-- 动态绑定图片的 src 属性 -->
                  <image @click="goDetail(item.goods_id)" :src="item.image_src"></image>
                </view>
    				</swiper-item>
    			</swiper>
    		</view>
        
        <!-- 分类导航区域 -->
        <view class="nav-list">
           <view class="nav-item" v-for="(item, id) in navList" :keys="id" @click="navgoto(item)">
                <image :src="item.image_src" class="nav-img"></image>
           </view>
        </view>
        
      <!-- 楼层区域 -->
      <view class="floor-list">
        <!-- 楼层 item 项 -->
        <view class="floor-item" v-for="(item, i) in floorList" :key="i">
          <!-- 楼层标题 -->
          <image :src="item.floor_title.image_src" class="floor-title"></image>
          <!-- 楼层图片区域 -->
          <view class="floor-img-box">
            <!-- 左侧大图片的盒子 -->
            <navigator class="left-img-box" :url="item.product_list[0].url">
              <image class="left-img" :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}"></image>
            </navigator>
            <!-- 右侧 4 个小图片的盒子 -->
            <view class="right-img-box">
              <navigator :url="item2.url"  class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
                <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
              </navigator>
            </view>
          </view>
        </view>
      </view>
        
  </view>
</template>

<script>
  import { getSwiperList, getNavList, getFloorList } from '@/api/home.js'
  import toast from '@/utils/toast.js'
  export default {
    data() {
      return {
          indicatorDots: true,
          autoplay: true,
          interval: 2000,
          duration: 500,
        // 1.轮播图的数据列表，默认为空数组
        swiperList: [], //轮播图数组
        navList: [], // 导航菜单数组
        floorList: [], // 楼层数组 
      };
    },
    onLoad() {
      // 在小程序页面刚刚加载的时候，调用获取轮播图数据
      this.getSwiper(),
      this.getNav(),
      this.getFloor()
    },
      
    methods: {
      // 获取轮播图的方法
    async  getSwiper() {
        const res =  await getSwiperList()
        //console.log(res)
        // 数据请求失败时
        if (res.meta.status !== 200) return toast.err('数据请求失败')
        this.swiperList = res.message
        toast('数据请求成功')
      },
      // 跳转到商品详情页
      goDetail(id) {
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+ id
        })
      },
      // 导航菜单
     async getNav() {
        const res = await getNavList() 
          //console.log(res);
          this.navList = res.message
      },
      // 导航菜单跳转此处做一个判断
      navgoto(item) {
        if(item.name === '分类') {
          uni.switchTab({
            url:"/pages/cate/cate"
          })
        } else {
          uni.switchTab({
            url:"/pages/my/my"
          })
        }
      },
      
      // 楼层区域
    async  getFloor() {
       const res  = await getFloorList()
       //console.log(res);
       
       // 对数据进行处理 双重forEach遍历
       res.message.forEach(floor => {
         floor.product_list.forEach(prod => {
           prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
         })
       })
      
       this.floorList = res.message
    },
       // 跳转到搜索页
      gotoSearch() {
        uni.navigateTo({
          url:"/subpkg/goods-search/goods-search"
        })
      }
    }
  }
</script>

<style lang="scss">

	.swiper {
		height: 330rpx;
    .swiper-item ,
    	image {
        width: 100%;
        height: 100%;
      }
	}
	
  .nav-list {
    margin: 15px 0;
    display: flex;
    justify-content: space-around;  
      .nav-img {
        width: 128rpx;
        height: 140rpx;
      }
  }
  
  .floor-title {
    height: 60rpx;
    width: 100%;
    display: flex;
  }
	
  .right-img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
	
  .floor-img-box {
    display: flex;
    padding-left: 10rpx;
  	.left-img {
  		height: 392rpx !important;
  	}
  }
  .search-box {
    position: sticky;
    top:0;
    z-index: 999;
  }
</style>
